<!-- 确认订单 -->
<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="address flex_bet_align" v-if="selectThe.id" @click="addsite">
			<view>
				<view class="name"><text>{{selectThe.username}}</text>{{selectThe.mobile}}</view>
				<view class="flex_align">
					<view class="tags" v-if="selectThe.is_default==1">默认</view>
					<view class="site">{{selectThe.province}}{{selectThe.city}}{{selectThe.area}}{{selectThe.address}}</view>
				</view>
			</view>
			<view class="iconfont icon-xwtubiaoku-03"></view>
		</view>
		<view class="address" v-else @click="addsite">
			<view class="flex_bet_align center">
				<u-icon name='map-fill' size="34" color="#38BE8C"></u-icon>
				<view class="tips">请添加收货地址</view>
			</view>
		</view>
		<view class="goods">
			<view class="shopName">平台积分商城</view>
			<view class="flex">
				<image class="goodsImg" :src="info.goods_info.image"></image>
				<view style="flex:1;">
					<view class="goodsName clamp1">{{info.goods_info.title}}</view>
					<view class="price">{{total}}积分</view>
					<view class="flex_bet">
						<view class="sku">{{info.goods_info.spec?info.goods_info.spec.spec_name:""}}</view>
					</view>
				</view>
			</view>
			<view class="bot">
				<view class="item flex_bet_align">
					<view class="name">消费积分</view>
					<view>{{total}}积分</view>
				</view>
				<view class="item flex_bet_align">
					<view class="name">买家留言</view>
					<input type="text" v-model="note" placeholder="请输入你的留言">
				</view>
			</view>
		</view>
		<view style="height:110rpx;"></view>
		<view class="foot flex_bet_align">
			<view class="flex_align">
				<view class="count">共{{info.number}}件</view>
				<view class="total">总计：<text>{{total}}</text>积分</view>
			</view>
			<view class="btn" @click="buy">立即兑换</view>
		</view>
	</view>
</template>

<script>
	var _this,shak;
	export default {
		data() {
			return {
				settingdata: {
					name: '确认订单',
					bgColor: 'transparent',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "supplydetail"
				},
				// 所有内容
				info:{
					goods_info:{},
					number:1,
				},
				// 总积分
				total:0,
				//留言
				note:'',
				freight:0, //运费
				// 选中的地址
				selectThe:{
					username:"",
					id:"",
					province:"",
					city:"",
					area:"",
					address:""
				},
			}
		},
		onLoad(options){
			_this=this
			console.log(JSON.parse(decodeURIComponent(options.json)).goods_info.spec.id)
			if(options.json){
				_this.info = JSON.parse(decodeURIComponent(options.json))
				
				_this.total=parseInt(_this.info.count_integral)
			}
			if(JSON.parse(decodeURIComponent(options.json)).address){
				_this.selectThe=JSON.parse(decodeURIComponent(options.json)).address
			}
		},
		onShow() {
			if(uni.getStorageSync("selectThe")){
				_this.selectThe=uni.getStorageSync("selectThe")
				uni.removeStorageSync("selectThe")
			}
		},
		methods: {
			reduce(){
				if(this.info.number>1){
					this.info.number --
				}
			},
			// 添加数量
			add(){
				if(this.info.number<this.info.spec.stock){
					this.info.number ++
				}
			},
			//添加收货地址
			addsite(){
				_this.click_shake(()=>{
					uni.navigateTo({
						url:"/personal/myAddress?place_order=1"
					})
				})
			},
			// 防抖点击
			click_shake(fn){
				if(!_this.shake){
					fn && typeof fn === 'function' && fn()
					_this.shake=true
					setTimeout(function(){
						_this.shake=false
					},500)
				}
			},
			buy(){
				if(!_this.selectThe.id){
					uni.showToast({
						title:'请添加收货地址',
						icon:"none"
					})
					return false
				}
				_this.$api.post("submitorder", {
						mobile:_this.selectThe.mobile,
						integral_goods_id:_this.info.goods_info.id,
						number:_this.info.number,
						consume_integral:_this.total,
						address:_this.selectThe.province+_this.selectThe.city+_this.selectThe.area+_this.selectThe.address,
						useranme:_this.selectThe.username,
						freight:0,
						city_id:_this.selectThe.id,
						sku_id:_this.info.goods_info.spec.id?_this.info.goods_info.spec.id:"",
						note:_this.note,
				}).then(data => {
					uni.showToast({
						title:'下单成功',
					})
					setTimeout(function(){
						uni.navigateBack({
							
						})
					},1500)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F7F7F7;
		font-family: PingFang SC;
	}
	.address{
		padding:40rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		.name{
			font-size: 28rpx;
			font-weight: 700;
			color: #333333;
			margin-bottom: 14rpx;
			text{
				margin-right: 30rpx;
			}
		}
		.tags{
			width: 70rpx;
			height: 36rpx;
			line-height: 36rpx;
			background: #38be8c;
			border-radius: 18rpx;
			font-size: 18rpx;
			text-align: center;
			color: #ffffff;
			margin-right: 10rpx;
		}
		.site{
			font-size: 24rpx;
			color: #666666;
		}
		.center{
			width: 275rpx;
			margin:0 auto;
			.tips{
				font-size: 32rpx;
				font-weight: 700;
				color: #333333;
			}
		}
	}
	.goods{
		padding:24rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		.shopName{
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 28rpx;
		}
		.goodsImg{
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx;
			margin-right:22rpx;
			background-color: #EEEEEE;
		}
		.goodsName{
			font-size: 28rpx;
			color: #333333;
			max-width: 460rpx;
		}
		.price{
			font-size: 28rpx;
			font-weight: 700;
			color: #f73f3f;
			margin:8rpx 0 14rpx;
		}
		.sku{
			font-size: 24rpx;
			color: #999999;
		}
		.stepper{
			width: 200rpx;
			height: 56rpx;
			background: #ffffff;
			border: 2rpx solid #ececec;
			border-radius: 30rpx;
			line-height: 56rpx;
			text-align: center;
			.reduce{
				width: 63rpx;
				border-right: 1rpx solid #ECECEC;
			}
			.value{
				width: 70rpx;
			}
			.add{
				width: 63rpx;
				border-left:1rpx solid #ECECEC;
			}
		}
		.bot{
			height: 198rpx;
			margin-top:40rpx;
			border-top: 1rpx solid #EEEEEE;
			.item{
				height: 99rpx;
				line-height: 99rpx;
				font-size: 28rpx;
				color: #999999;
				.name{
					font-size: 28rpx;
					color: #333333;
				}
				input{
					text-align: right;
				}
			}
		}
	}
	.foot{
		width: 100%;
		height: 110rpx;
		padding:0 30rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left:0;
		.count{
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			margin-right: 24rpx;
		}
		.total{
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
			text{
				color:#F73F3F;
			}
		}
		.btn{
			width: 152rpx;
			height: 70rpx;
			background: linear-gradient(90deg,#38be8c, #06adba 96%);
			border-radius: 36rpx;
			font-size: 26rpx;
			text-align: center;
			line-height: 70rpx;
			color: #ffffff;
		}
	}
</style>
